<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3常用动画图标（共12款）</title>
<link rel="stylesheet" href="./iconMenu.css">
</head>

<body style="background:url(./image/bg.png);margin:0;padding:0;">
<div class="container">
  <h1>CSS3常用动画图标（共12款）</h1>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-2"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-3"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-4"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-5"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-6"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-7"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-8"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-9"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-10"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-11"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-12"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
});
</script>
</body>
</html>
